<script>
import uniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"
import request from "@/utils/request"
import empty from "@/components/empty.vue"
import { handleUrlParams, showModal, showToast } from "@/utils"

export default {
  name: "questionList",
	components: {
		uniLoadMore,
		empty,
	},
	data() {
	  return {
			loadMoreStatusText: "more",
			list: [],
			pagination: {
				current: 1,
				size: 10,
			},
		};
	},
	methods: {
		handleUrlParams,
		//清空分页并重新加载数据
		async resetPaginationAndLoadData() {
			this.pagination.current = 1
			this.list = []
			await this.loadData()
		},
		loadData() {
			return new Promise((resolve, reject) => {
				if (this.loadMoreStatusText === "loading") {
					resolve()
				}
				this.loadMoreStatusText = "loading"
				request({
					url: "userTopicFavorites/listTopicFavorites",
					data: this.pagination,
					errorHandle: true,
				})
					.then((data) => {
						this.list.push(...data.records)
						//检查是否有下一页
						if (this.list.length >= data.total) {
							this.loadMoreStatusText = "noMore"
						} else {
							this.loadMoreStatusText = "more"
						}
						resolve()
					})
					.catch(() => {
						reject()
					})
			})
		},
		//删除题目结构
		async deleteStructure(item, index) {
			if (
				!(await showModal({
					title: "警告",
					content: "确定要将该题目从收藏列表中移除吗？",
				}))
			) {
				return
			}
			await request({
				url: "userTopicFavorites/cancelFavorites",
				data: {
					ids: [item.structureId],
				},
				errorHandle: true,
			})
			showToast.success("删除成功")
			this.list.splice(index, 1)
		},
		//滑到底加载更多
		reachBottom() {
			if (this.loadMoreStatusText === "noMore" || this.loadMoreStatusText === "loading") {
				return
			}
			this.pagination.current++
			this.loadData()
		},
		//下拉刷新
		pullDownRefresh() {
			this.resetPaginationAndLoadData().finally(() => {
				uni.stopPullDownRefresh()
			})
		},
	}
}
</script>

<template>
  <view class="component">
    <view class="list" v-if="list.length > 0">
      <view class="item" v-for="(item, index) in list" :key="item.structureId">
        <view class="row">
          <view class="title">{{ item.structureName }}</view>
        </view>
        <view class="row">
          <view class="info">
            <text>{{ item.structureYear }}</text>
            <text>\t年</text>
          </view>
        </view>
        <view class="divide-line"></view>
        <view class="row btn-row">
          <!--						刷题-->
          <view
            class="btn primary"
            @click="
              $uni.navigateTo({
                url: handleUrlParams('/practice/pages/index/index', item),
              })
            "
            >前往刷题
          </view>
          <!--						删除-->
          <view class="btn danger" @click.stop="deleteStructure(item, index)">取消收藏</view>
        </view>
      </view>
			<!--		加载下一页-->
			<uni-load-more :status="loadMoreStatusText"></uni-load-more>
    </view>
		<empty v-else height="calc(100vh - 100rpx)"></empty>
  </view>
</template>

<style scoped lang="scss">
.list {
	padding-left: 30rpx;
	padding-right: 30rpx;
	.item {
		background: white;
		border-radius: 30rpx;
		padding: 30rpx;
		margin-top: 30rpx;
		.row {
			display: flex;
			align-items: center;
			&:not(:last-child) {
				margin-bottom: 20rpx;
			}
			&.btn-row {
				justify-content: space-between;
			}
			> .title {
				font-size: 32rpx;
				color: var(--text-color);
			}
			> .info {
				font-size: 32rpx;
				color: var(--text-color-light);
			}
		}
		.divide-line {
			height: 2rpx;
			background: var(--border-color);
			margin: 20rpx 0;
		}
		.btn {
			font-size: 30rpx;
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 40rpx;
			border-radius: 30rpx;
			
			&.primary {
				background: var(--theme-color);
				color: white;
			}
			
			&.info {
				background: var(--gray-background-color);
				border: 2rpx solid var(--border-color);
			}
			
			&.danger {
				background: #c0392b;
				color: white;
			}
		}
	}
}
</style>
